<template>
  <div>
    <TopBar title="联系人"></TopBar>
    <!-- 联系人卡片 -->

    <van-empty v-if="list.length === 0" :description="description" />
    <van-pull-refresh v-else v-model="isLoading" @refresh="pullDown">
      <van-list
        v-model="loading"
        :finished="completed"
        :immediate-check="false"
        finished-text="没有更多了"
        loading-text="拼命加载中..."
        @load="pullUp"
      >
        <van-cell v-for="item in informationList" :key="item._id">
          <van-col :span="2">
            <van-icon name="user-o" />
          </van-col>
          <van-col :span="8">
            <span style="font-weight: 600;">姓名：</span>
            {{item.name}}
          </van-col>
          <van-col :span="2">
            <van-icon name="closed-eye" />
          </van-col>
          <van-col>
            <span style="font-weight: 600;">学号：</span>
            {{item.number}}
          </van-col>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import TopBar from "@/views/component/topBar";
import { mapState } from "vuex";
export default {
  components: {
    TopBar
  },
  data() {
    return {
      list: [],
      informationList: [],
      description: "您还没有最近联系人",
      pageNum: 1,
      pageSize: 10,
      loading: false, // true不会触发任何事件，控制加载数据
      isLoading: false, //刷新
      finished: false, //全部数据
      completed: false //是否加载完
    };
  },
  mounted() {
    this.pageNum = 1;
    this.pageSize = 10;
    this.getMailboxList();
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  methods: {
    getMailboxList() {
      this.informationList = [];
      if (this.completed) return;
      this.loading = true;
      this.$api
        .get("/api/mailbox/list", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            type: "admin",
            sendId: this.userInfo.number
          }
        })
        .then(res => {
          this.isProcessing(res.data.data.records);
          this.loading = false;
          if (this.pageSize * this.pageNum > res.data.data.total) {
            this.completed = true;
          }
          this.isLoading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    isProcessing(arr) {
      arr.forEach(item => {
        let obj = "";
        obj += item.recipientId + "," + item.recipientName;
        this.list.push(obj);
      });
      this.list = [...new Set(this.list)];
      this.StringToObj(this.list);
    },
    StringToObj(arr) {
      arr.forEach(item => {
        item = item.split(",");
        let obj = {};
        obj.number = item[0];
        obj.name = item[1];
        this.informationList.push(obj);
      });
    },
    // 上滑加载
    pullUp() {
      if (this.completed) {
        return;
      }
      this.pageNum++;
      this.getMailboxList();
    },
    // 下拉刷新
    pullDown() {
      this.list = [];
      this.pageNum = 1;
      this.completed = false;
      this.isLoading = true;
      this.getMailboxList();
    }
  }
};
</script>

<style>
.container {
  border-bottom: 1px dotted rgb(238, 237, 237);
  background: #fff;
}
</style>